<script setup lang="ts">
import { onUnmounted } from 'vue';

const props: any = defineProps<{
    ujt: any;
    id?: any;
    popstyle?: any;
    maskstyle?: any;
}>();
const { $global } = props.ujt;
// 初始化pop数据
if (!props.id) {
    props.id = 'popdefaulttip';
}
if (!$global.pop[props.id]) {
    $global.pop[props.id] = {};
}
if (!$global.pop[props.id]?.zindex) {
    $global.pop[props.id].zindex = 101;
}
if (!$global.pop[props.id]?.popstyle) {
    if (props?.popstyle) {
        $global.pop[props.id].popstyle = props.popstyle;
    } else {
        $global.pop[props.id].popstyle = {
            width: 'auto',
            height: 'auto',
            top: 0,
            right: 0,
        };
    }
}
if (!$global.pop[props.id]?.maskstyle) {
    if (props?.maskstyle) {
        $global.pop[props.id].maskstyle = props.maskstyle;
    } else {
        $global.pop[props.id].maskstyle = {};
    }
}
onUnmounted(() => {
    $global.pop[props.id] = {};
});
</script>

<template>
    <div :class="$global.pop[props.id]?.css + ' as-pop-drop'">
        <div
            class="as-pop-drop-area"
            v-if="
                $global.pop[props.id].stat &&
                $global.pop[props.id].popstyle?.top != 0
            "
        >
            <div
                class="as-pop-drop-pop"
                :style="$global.pop[props.id].popstyle"
            >
                <slot name="pop">{{ $global.pop[props.id].con || '' }}</slot>
            </div>
        </div>
        <div
            class="as-pop-drop-des"
            @pointerdown.stop="
                $global.pop[props.id].stat = $global.pop[props.id].stat ? 0 : 1
            "
        >
            <slot name="des">{{ $global.pop[props.id].des || '' }}</slot>
        </div>
        <div
            class="as-pop-drop-area"
            :id="'pop' + id"
            v-if="
                $global.pop[props.id].stat &&
                $global.pop[props.id].popstyle?.top == 0
            "
        >
            <div
                class="as-pop-drop-pop"
                :style="$global.pop[props.id].popstyle"
            >
                <slot name="pop">{{ $global.pop[props.id].con || '' }}</slot>
            </div>
        </div>
        <div
            class="as-pop-drop-mask"
            :style="$global.pop[props.id].maskstyle"
            v-if="$global.pop[props.id].stat"
            @pointerdown.stop="$global.pop[props.id].stat = 0"
        ></div>
    </div>
</template>

<style scoped lang="scss">
.as-pop-drop {
    display: inline-block;
    .as-pop-drop-des {
        display: inline-block;
        width: auto;
        user-select: none;
    }
    .as-pop-drop-mask {
        position: fixed;
        top: 0;
        left: 0;
        z-index: v-bind('$global.pop[props.id].zindex - 1');
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .as-pop-drop-area {
        position: relative;
        .as-pop-drop-pop {
            user-select: none;
            position: absolute;
            display: inline-flex;
            flex-direction: column;
            z-index: v-bind('$global.pop[props.id].zindex');
            overflow: auto;
        }
    }
}
</style>
